<template>
  <div id="reward_process">
    <c-title :hide="false" :text="WXtitle" tolink="IntegralGetRecord"> </c-title>
    <diyBackGround :minHeight="'8.5rem'">
      <div class="member_box">
        <img :src="info.source_thumb" />
        <div class="member_box_name">{{ info.source_name }}</div>
      </div>
    </diyBackGround>

    <div id="reward_header">
      <div class="reward_box" v-if="info.set && (info.set.is_accumulated_rewards || info.set.is_awaiting_rewards)">
        <ul class="reward_a">
          <li>{{ info.order_count }}</li>
          <li>累计订单</li>
        </ul>
        <ul class="reward_b" v-if="info.set && info.set.is_accumulated_rewards">
          <li>{{ info.amount_finish }}</li>
          <li>累计奖励（元）</li>
        </ul>
        <ul class="reward_b" v-if="info.set && info.set.is_awaiting_rewards">
          <li>{{ info.amount_surplus }}</li>
          <li>待奖励（元）</li>
        </ul>
      </div>
      <div v-else class="orderBox">
        <div class="orderBox_l">累计订单</div>
        <div class="orderBox_r">{{ info.order_count }}</div>
      </div>
    </div>
    <div id="content">
      <div class="goods_box" v-for="(item, i) in list" :key="i">
        <div class="img" v-if="info.set && info.set.is_member_info">
          <img :src="item.has_one_member.avatar" />
        </div>
        <ul class="name">
          <li class="goods_a">
            <span class="goods_a_name" v-if="info.set && info.set.is_member_info">{{ item.has_one_member.nickname }}</span>
            <span class="goods_a_name" v-if="info.set && !info.set.is_member_info && info.set.is_awaiting_rewards_amount">待奖励金额</span>
            <span class="goods_a_price" v-if="info.set && info.set.is_awaiting_rewards_amount">{{ $i18n.t("money") }}{{ item.amount_surplus }}</span>
          </li>
          <li class="goods_b">
            <span class="goods_b_time">{{ item.created_at }}</span>
            <span class="goods_b_status" :class="{ none_status: item.status == 1 }">{{ item.status_name }}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import reward_process_controller from "./reward_process_controller";

export default reward_process_controller;
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
#reward_process {
  padding-bottom: 2rem;
  min-height: 100vh;
  .member_box {
    padding: 0.88rem 1.06rem;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    img {
      width: 3.44rem;
      height: 3.44rem;
      margin: 0;
      border-radius: 50%;
    }
    .member_box_name {
      font-size: 1rem;
      color: #ffffff;
      line-height: 1.5rem;
      margin-left: 0.53rem;
    }
  }
  #reward_header {
    margin: 0 0.75rem;
    margin-top: -2.94rem;
    .orderBox {
      width: 21.94rem;
      height: 3rem;
      background: #ffffff;
      border-radius: 0.5rem;
      padding: 0 0.75rem;
      display: flex;
      font-weight: 500;
      font-size: 0.88rem;
      align-items: center;
      justify-content: space-between;
    }
    .reward_box {
      display: flex;
      justify-content: space-around;
      padding: 0.75rem 0;
      height: 4.41rem;
      background: #ffffff;
      border-radius: 0.5rem;

      .reward_a,
      .reward_b,
      .reward_c {
        width: 33.33%;
        text-align: center;

        li {
          span {
            font-size: 14px;
          }
        }

        li:first-child {
          height: 1.625rem;
          line-height: 1.625rem;
          font-size: 18px;
          font-weight: bold;
        }

        li:last-child {
          line-height: 1.5rem;
          color: #8c8c8c;
          font-size: 14px;
        }
      }
    }
  }

  #content {
    margin: 0 0.75rem;
    margin-top: 0.625rem;
    background-color: #fff;
    border-radius: 0.5rem;
    .goods_box {
      display: flex;
      // padding: 0.75rem;
      padding: 0.75rem 0;
      margin: 0 0.75rem;
      border-bottom: solid 0.0625rem #ebebeb;

      .img {
        flex-shrink: 0;
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 50%;
        overflow: hidden;
        margin-right: 0.53rem;
        background-color: #f8f8f8;

        img {
          width: 2.5rem;
          height: 2.5rem;
          border-radius: 50%;
        }
      }

      .name {
        flex: 1;
        .goods_a {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .goods_a_name {
            font-weight: bold;
            font-size: 0.94rem;
            color: #00001c;
          }
          .goods_a_price {
            font-weight: 500;
            font-size: 0.88rem;
          }
        }

        .goods_b {
          line-height: 1.25rem;
          display: flex;
          justify-content: space-between;
          font-size: 15px;
          color: #8c8c8c;
          .goods_b_time {
            font-size: 0.75rem;
            color: #686868;
          }
          .goods_b_status {
            font-size: 0.75rem;
            color: #f15353;
          }
          .none_status {
            color: #6e6e79;
          }
        }
      }
    }
    .goods_box:last-child {
      border-bottom: none;
    }
  }
}
</style>
